<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>绘本列表</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/my.css">
  <link rel="stylesheet" href="css/dropload.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="header-box">
  <p>绘本列表</p>
</div>
<div class="search">
    <div class="search_box">
      <img src="img/index/sousuo(2)@2x.png">
      <input id="searchKeyword" type="text" placeholder="书名\作者"/>
    </div>
  </div>
<div class="borrow">
  <div class="borrow_top" id="borrow_top" style="margin-top: 0rem;">
    <a href="javascript:;" class="borr_active" onclick="load(null)">全部(<h id="countAll">0</h>)</a>
    <a href="javascript:;" onclick="load(8)" id="a8">智商(<h id="count8">0</h>)</a>
    <a href="javascript:;" onclick="load(10)" id="a10">情商(<h id="count10">0</h>)</a>
    <a href="javascript:;" onclick="load(6)" id="a6">心商(<h id="count6">0</h>)</a>
    <a href="javascript:;" onclick="load(12)" id="a12">逆商(<h id="count12">0</h>)</a>
    <a href="javascript:;" onclick="load(7)" id="a7">美商(<h id="count7">0</h>)</a>
    <a href="javascript:;" onclick="load(9)" id="a9">财商(<h id="count9">0</h>)</a>
    <a href="javascript:;" onclick="load(13)" id="a13">亲子(<h id="count13">0</h>)</a>
    <a href="javascript:;" onclick="load(15)" id="load(15)">育儿(<h id="count15">0</h>)</a>
  </div>
  
  <div class="huise3"></div>
  <div class="borrow_list">
    <ul id="borrow_list_box">
     
    </ul>
  </div>
</div>
<div class="footer_kb"></div>
<div class="footer_kb1"></div>
</body>

<!-- 	<span style="width: 3.15rem;height: 2.49rem;margin: 0.38rem 0 0.31rem 0;text-align: center;"> -->
<!-- <img style="height: 2.49rem;max-width: 3.1rem;;margin: 0.38rem 0 0.31rem 0;" src="{{:bookImage1}}"></span> -->
<script id="book_show_tmpl" type="text/x-jsrender">
<li class="bookList" id="{{:id}}"><b></b>

 <div class="divImg"><img src="{{:bookImage1}}"></div>


	<div class="box_right">
		<p>{{:bookName}}</p><br>
		<p>作者：{{:author}}</p>
		<p>主题：<i>{{:classificationName}}</i>
		</p>
		<p>适龄：<b>{{:readMinAge}}-{{:readMaxAge}}岁</b>
		</p>
		<div class="xingxing1">
			 {{if evaluationStar<1}}
            <img src="img/index/xing6@2x.png">
			{{/if}}
			{{if evaluationStar>0 && evaluationStar<2}}
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if evaluationStar>=2 && evaluationStar<3}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if evaluationStar>=3 && evaluationStar<4}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if evaluationStar>=4 && evaluationStar<5}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if evaluationStar>=5}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}
           <!-- <span>{{:evaluationStar}}</span>-->
		</div>
	</div>
</li>
</script>
<script src="js/jquery.js"></script><script src="js/jquery.cookie.js"></script>
<script src="js/base.js?v=base.js?v=20180102"></script>
<script src="js/jsrender.js"></script>
<script src="js/dropload.min.js"></script>
<script>
var pageNum = 1;
var pageSize = 5;
var noData = false;


  $("#borrow_top>a").click(function () {
      $(this).addClass('borr_active').siblings().removeClass('borr_active');
  });
  
var types = getQueryString("types");
var searchKeywords = getQueryString("searchKeyword");

if(types != null && types != ""){
	$("#a"+types).addClass('borr_active').siblings().removeClass('borr_active');
	types = null;
}
if(searchKeywords != null && searchKeywords != ""){
	$("#searchKeyword").val(decodeURI(searchKeywords));
}

$("#searchKeyword").focus();
dropload();
loadType();
loadData();  


$("#searchKeyword").bind("input propertychange", function() { 
	searchKeywords = $(this).val();
	pageNum = 1;
	$("#borrow_list_box").empty();
	dropload();
	loadData();
	
});
// $("#searchKeyword").change(function(){
// 	var searchKeyword = $("#searchKeyword").val();
// 	loadData(types,searchKeyword)
// });

function load(type){
	$("#borrow_list_box").empty();
	dropload();
	types = type;
	searchKeywords = $("#searchKeyword").val();
	loadData();
}
function loadType(){
	$.get({
		url : window.baseUrl + "/api/book/bookGroupType/findList",
		data : {},
		success : function(data) {
			var data = data.data;
			var countAll = 0;
			$.each(data,function(key,value){
				var cid = value.cid;
				var count = value.count;
				countAll += count
				$("#count"+cid).text(count);
			})
			$("#countAll").text(countAll);
		}
	});
}

function loadData(){
	$.get({
		url : window.baseUrl + "/api/book/book/findPage",
		data : {
			cid : types,
			searchKeyword : searchKeywords,
			pageNum : pageNum,
			pageSize : pageSize
		},
		success : function(data) {
			var data = data.data.list;
			if(data.length<0){
				noData = true;
				return;
			}
			//$("#borrow_list_box").empty();
			var htmlOutput = $.templates("#book_show_tmpl").render(data);
			$("#borrow_list_box").append(htmlOutput);
		}
	});
}  

$(document).on('click', '.bookList', function() {
	var id = $(this).attr("id");
	window.location.href= "bookDetails.html?id="+id;
});
	

function dropload(){
	$('.borrow_list div').remove();
	var dropload = $('.borrow_list').dropload({
		domDown : {
	        domClass   : 'dropload-down',
	        domRefresh : '<div class="dropload-refresh">下面暂无数据</div>',
	//         domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
	//         domLoad    : '<div class="dropload-load"><span class="loading"></span>绘本加载中...</div>',
	//         domNoData  : '<div class="dropload-noData">下面暂无数据</div>'
	    },
	    scrollArea : window,
	    autoLoad: false,
	    loadDownFn : function(me){
	    	if(noData){
	    		 // 锁定
	            me.lock();
	            // 无数据
	            me.noData();
	    	}else{
		   		 pageNum+=1;
		       	 loadData();
		       	 me.resetload();
	    	}
	    	
	    }
	});

}


</script>
</html>